<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="renderer" content="webkit">
	<title>权限管理系统</title>
	<!--[if lt IE 9]>
	    <meta http-equiv="refresh" content="0;ie.html" />
	    <![endif]-->
	<link rel="shortcut icon" href="favicon.ico">
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
	<link th:href="@{/css/font-awesome.css}" rel="stylesheet">
	<link th:href="@{/css/animate.css}" rel="stylesheet">
	<link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow: hidden">
	<div id="wrapper">
		<!--左侧导航开始-->
		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="nav-close">
				<i class="fa fa-times-circle"></i>
			</div>
			<div class="sidebar-collapse">
				<ul class="nav" id="side-menu">
					<li class="nav-header">
						<div class="dropdown profile-element">
							<span>
								<img alt="image" class="img-circle" :src="pageInfo.user.img" />
							</span> 
							<a data-toggle="dropdown" class="dropdown-toggle" href="#"> 
								<span class="clear">
									<span class="block m-t-xs">
										<strong class="font-bold">{{pageInfo.user.nickname}}</strong>
									</span> 
									<span class="text-muted text-xs block">{{pageInfo.user.nickname}}<b class="caret"></b>
									</span>
								</span>
							</a>
						</div>
					</li>
					<li>
						<a href="#">
							<i class="fa fa-home"></i>
							<span class="nav-label">主页</span> <span class="fa arrow"></span>
						</a>
						<ul class="nav nav-second-level">
							<li>
								<a id="index001" class="J_menuItem" href="index_v1.html" data-index="0" >
									权限管理系统介绍
								</a>
							</li>
						</ul>
					</li>
					<li v-for="menu in pageInfo.menus">
						<a href="#"> 
							<i class="fa fa fa-bar-chart-o" :class="menu.icon}"></i>
							<span class="nav-label">{{menu.name}}</span> <span class="fa arrow"></span>
						</a>
						<ul class="nav nav-second-level">
							<li v-for="submenu in menu.subMenus">
								<a class="J_menuItem" :href="submenu.url">
									{{submenu.name}}
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>
		<!--左侧导航结束-->
		
		
		<!--右侧部分开始-->
		<div id="page-wrapper" class="gray-bg dashbard-1">
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
					<div class="navbar-header">
						<a href="#" class="navbar-minimalize minimalize-styl-2 btn btn-primary " >
							<i class="fa fa-bars"></i> 
						</a>
					</div>
					<ul class="nav navbar-top-links navbar-right">						
						<li class="dropdown hidden-xs">
							<a class="right-sidebar-toggle" aria-expanded="false"> 
								<i class="fa fa-tasks"></i> 主题
							</a>
						</li>
					</ul>
				</nav>
			</div>
			
			
			<div class="footer">
				<div th:replace="fragments/footer :: footer"></div>
			</div>
		</div>
		<!--右侧部分结束-->
		
		<!--右侧边栏开始-->
		<div id="right-sidebar">
			<div class="sidebar-container">
				<ul class="nav nav-tabs navs-3">
					<li class="active">
						<a data-toggle="tab" href="#tab-1"> 
							<i class="fa fa-gear"></i> 主题
						</a>
					</li>
				</ul>
				<div class="tab-content">
					<div id="tab-1" class="tab-pane active">
						<div class="sidebar-title">
							<h3>
								<i class="fa fa-comments-o"></i> 主题设置
							</h3>
							<small><i class="fa fa-tim"></i>
								你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地，下次打开的时候会直接应用这些设置。</small>
						</div>
						<div class="skin-setttings">
							<div class="title">皮肤选择</div>
							<div class="setings-item default-skin nb">
								<span class="skin-name "> 
									<a href="#" class="s-skin-0">默认皮肤 </a>
								</span>
							</div>
							<div class="setings-item blue-skin nb">
								<span class="skin-name "> 
									<a href="#" class="s-skin-1">蓝色主题 </a>
								</span>
							</div>
							<div class="setings-item yellow-skin nb">
								<span class="skin-name "> 
									<a href="#" class="s-skin-3">黄色/紫色主题 </a>
								</span>
							</div>
						</div>
					</div>					
				</div>
			</div>
		</div>
	</div>
	
	<!-- 全局js -->
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
	<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
	<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
	<!-- 自定义js -->
	<script th:src="@{/js/hplus.js}"></script>
	
	<!-- 第三方插件 -->
	<script th:src="@{/js/plugins/pace/pace.min.js}"></script>
	<!-- vue -->
	<script th:src="@{/js/vue.js}"></script>
	<script th:src="@{/js/axios.js}"></script>
	<script th:src="@{/js/site.js}"></script>
		
	
	<script type="text/javascript">
		var wrapper = new Vue({
			el : '#wrapper',
			data : {
				pageInfo : []
			},
			methods : {
				notify : function() {
					$.getJSON('/oa/notify/message', function(r) {
						wrapper.total = r.total;
						wrapper.rows = r.rows;
					});
				},
				
			},
			created : function() {
				fetch(function(res){
					this.pageInfo = res
				}, "/getIndexInfo")
			}
		})
	</script>
</body>
</html>
